<template>
    <el-menu
      :unique-opened="true"
      :collapse-transition="false"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      router
      class="common-sidebar-menu"
    >
      <!-- Logo/系统名称 -->
      <div class="sidebar-logo-container">
        <router-link key="expand" class="sidebar-logo-link" to="/">
          <!-- <img v-if="logo" :src="logo" class="sidebar-logo" alt="Logo" /> -->
          <h1 class="sidebar-title">电力设备智能管理系统</h1>
        </router-link>
      </div>
  
      <!-- 菜单项 -->
      <el-menu-item index="/dashboard">
        <el-icon><HomeFilled /></el-icon>
        <template #title>仪表盘</template>
      </el-menu-item>
<!-- 设备管理导航 -->
      <el-sub-menu index="device">
        <template #title>
          <el-icon><Cpu /></el-icon>
          <span>设备管理</span>
        </template>
        <el-menu-item index="/device/list">
          <el-icon><Tickets /></el-icon>
          <template #title>设备台账</template>
        </el-menu-item>
        <el-menu-item index="/device/monitor">
          <el-icon><Tickets /></el-icon>
          <template #title>设备监控</template>
        </el-menu-item>
      </el-sub-menu>
<!-- 故障管理导航 -->
      <el-sub-menu index="fault">
        <template #title>
          <el-icon><Cpu /></el-icon>
          <span>故障管理</span>
        </template>
        <el-menu-item index="/fault/report">
          <el-icon><Tickets /></el-icon>
          <template #title>故障报告</template>
        </el-menu-item>
        <el-menu-item index="/fault/process">
          <el-icon><Tickets /></el-icon>
          <template #title>故障处理</template>
        </el-menu-item>
      </el-sub-menu>
      <!-- 维护导航 -->
       <el-sub-menu index="maintence">
        <template #title>
          <el-icon><Cpu /></el-icon>
          <span>维护计划管理</span>
        </template>
        <el-menu-item index="/maintenance/plan">
          <el-icon><Tickets /></el-icon>
          <template #title>维护计划</template>
        </el-menu-item>
        <el-menu-item index="/maintenance/task">
          <el-icon><Tickets /></el-icon>
          <template #title>维护任务</template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </template>
  
  <style lang="scss" scoped>
  .common-sidebar-menu:not(.el-menu--collapse) {
    height: 100%;
  }
  
  .common-sidebar-menu {
    height: 100%;
    border-right: none;
    overflow-y: auto;
    background-color: #304156;
  
    .sidebar-logo-container {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #2b2f3a;
      text-align: center;
      overflow: hidden;
  
      .sidebar-logo-link {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
  
        .sidebar-title {
          display: inline-block;
          margin: 0;
          color: #fff;
          font-weight: 600;
          line-height: 50px;
          font-size: 14px;
          font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
          vertical-align: middle;
          white-space: nowrap;
        }
      }
    }
  
    .el-menu-item, .el-sub-menu__title {
      height: 50px;
      line-height: 50px;
      padding-left: 20px !important;
  
      &:hover {
        background-color: #263445 !important;
      }
    }
  
    .el-menu-item.is-active {
      background-color: #409EFF !important;
      color: #fff !important;
    }
  }
  
  // 解决折叠后菜单项图标对齐问题
  :deep(.el-menu--collapse) {
    .el-sub-menu__icon-arrow {
      display: none;
    }
    .el-sub-menu__title span {
      height: 0;
      width: 0;
      overflow: hidden;
      visibility: hidden;
      display: inline-block;
    }
    .el-sub-menu__title .el-icon {
      margin-right: 0;
      vertical-align: middle;
    }
    .el-menu-item .el-icon {
      margin-right: 0;
      vertical-align: middle;
    }
  }
  </style>
  